<template>
    <div class="photoinfo-container">
        <!-- 标题区 -->
        <h1>{{photoInfo.title}}</h1>
        <p class="subtitle">
            <span>发起时间：{{photoInfo.add_time}}</span>
            <span>点击：{{photoInfo.click}}次</span>
        </p>

        <hr>

        <!-- 缩略图区 -->       
        <div class="thumbs">
            <vue-preview :slides="list" @close="handleClose"></vue-preview>
        </div>
        
        <!-- 图片内容区 -->
        <div class="content" v-html="photoInfo.content"></div>

        <!-- 放置评论组件 -->
        <comment-box :id="id"></comment-box>
    </div>
</template>

<script>
import comment from "../subcompoments/comment.vue"

export default {
    data(){
        return{
            id: this.$route.params.id,
            photoInfo: {},
            photoInfos:[
                {
                    id:1,
                    title:"好看的小姐姐章若楠！",
                    add_time:"2018-10-30 05:08:09",
                    click:3,
                    content:"这里是青春风格写真集，让你感受小姐姐青春飞扬的一面~！"

                },
                     {
                    id:2,
                    title:"章若楠小姐姐的简介",
                    add_time:"2018-12-31 08:04:06",
                    click:22,
                    content:"章若楠，1996年11月出生于浙江省温州市，中国内地女演员。2017年12月，在电影《悲伤逆流成河》中饰演顾森湘。2019年1月，参演都市情感剧《谁都渴望遇见你》。中文名 章若楠 国   籍 中国 民    族 汉族 星    座 天蝎座 身    高 166cm 出生地 浙江温州 出生日期 1996年11月 职    业 演员 经纪公司 北京光线传媒股份有限公司 代表作品悲伤逆流成河"

                },
            ],
            //缩略图数组
             lists: [

                 {
                     id:1,
                     imgsrc:[
                         {
                        msrc:require('../../images/list1-1.jpg'),
                        src: require('../../images/list1-1.jpg'),
                        w: 600,
                        h: 400
                    },
                        {
                        msrc:require('../../images/list1-2.jpg'),
                        src: require('../../images/list1-2.jpg'),
                        w: 900,
                        h: 400
                    },
                            {
                        msrc:require('../../images/list1-3.jpg'),        
                        src: require('../../images/list1-3.jpg'),
                        w: 600,
                        h: 900
                    },
                ]         
              },


              {
                     id:2,
                     imgsrc:[
                         {
                         msrc:require('../../images/list2-1.jpg'),        
                        src: require('../../images/list2-1.jpg'),
                        w: 600,
                        h: 400
                    },
                        {
                         msrc:require('../../images/list2-2.jpg'),        
                        src: require('../../images/list2-2.jpg'),
                        w: 600,
                        h: 400
                    },
                            {
                         msrc:require('../../images/list2-3.jpg'),        
                        src: require('../../images/list2-3.jpg'),
                        w: 600,
                        h: 400
                    },
                  
                               {
                        msrc:require('../../images/list2-4.jpg'),        
                        src: require('../../images/list2-4.jpg'),
                        w: 600,
                        h: 400
                    },
                               {
                       msrc:require('../../images/list2-5.jpg'),        
                        src: require('../../images/list2-5.jpg'),
                        w: 600,
                        h: 400
                    },
                                 {
                         msrc:require('../../images/list2-6.jpg'),        
                        src: require('../../images/list2-6.jpg'),
                        w: 600,
                        h: 400
                    },
                ]         
              }
            ],


            list:[]
        }


    },
    created(){
        this.getPhotoInfo();
        this.getThumbs();

    },
    methods:{
        // getPhotoInfo(){
        //     this.$http.get("api/getimageInfo/" + this.id).then(result =>{
        //         if (result.body.status === 0){
        //             this.photoInfo = result.body.message[0];
        //         }
        //     });
        // }

        // getThumbs(){
        //     this.$http.get("api/getthumimages/"+this.id).then(result =>{
        //         if (result.body.status === 0){
        //             result.body.message.forEach(item => {
        //                 item.w = 600;
        //                 item.h = 400;
                            //item.msrc = item.src
                        
        //             });
        //             this.list = result.body.message;
        //         }
        //     })
        // },
        getThumbs(){
            this.lists.forEach(item => {
                if (item.id == this.id){
                    this.list = item.imgsrc
                }
            })
        },
        getPhotoInfo(){
            for (let val of this.photoInfos){
                if (val.id == this.id){
                    this.photoInfo = val
                }
            }
        },
      
      handleClose () {
        console.log('close event')
      }
    
    },
    components:{
        'comment-box':comment
    }


}
</script>


<style lang="scss" scoped>
.photoinfo-container{
    padding: 3px;
    h1{
    color: #26a2ff;
    font-size: 15px;
    text-align: center;
    margin: 15px 0;
    }   

    .subtitle{
    display: flex;
    justify-content: space-between;
    font-size: 13px;
  
    }  
    .content{   
    font-size: 13px;
    line-height: 20px;
    }
}
</style>
